body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: hsl(240, 56%, 98%);
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.nav-pill {
  &-indicator {
    --i: 0;

    transform: translateX(calc(100% * var(--i)));
  }

  &-item {
    color: var(--secondary-color-darkest);
    transition: 0.3s;

    @for $i from 1 through 3 {
      &:nth-child(#{$i}) {
        &:hover {
          & ~ .nav-pill-indicator {
            $j: $i - 1;
            --i: #{$j};
          }
        }
      }
    }
  }
}
